<template>
  <Modal
    v-model="visible"
    width="700"
    title="佣金调整"
  >
    <div class="add" v-if="isEdit">
    	<Button type="primary" @click="onAdd">添加</Button>
    </div>
    <Table ref="table" border :columns="columns" :data="list">
      <template slot-scope="{ row, index }" slot="adjustType">
        <template v-if="row.add">
          <Select v-model="row.adjustType" @on-change="onChange(row, index)" transfer>
            <template v-for="{ key, value } in commissionAdjustType">
              <Option :value="key" :key="key">{{ value }}</Option>
            </template>
          </Select>
        </template>
        <template v-else>{{ $dt.dictInfo().__value('commissionAdjustType', row.adjustType) }}</template>
      </template>
      <template slot-scope="{ row, index }" slot="reason">
        <template v-if="row.add">
          <Input v-model="row.reason" @on-blur="onBlur(row, index, 'reason')" placeholder="请输入调整原因" />
        </template>
        <p v-else class="reason" :title="row.reason">{{ row.reason }}</p>
      </template>
      <template slot-scope="{ row, index }" slot="adjustAmount">
        <template v-if="row.add">
          <Input v-model="row.adjustAmount" @on-blur="onBlur(row, index, 'adjustAmount')" placeholder="请输入调整金额" />
        </template>
        <template v-else>{{ row.adjustAmount }}</template>
      </template>
    </Table>
    
    <div slot="footer" class="footer">
      <Button @click="hide">{{ isEdit ? '取消' : '关闭' }}</Button>
      <Button type="primary" v-if="isEdit" @click="onConfirm">保存</Button>
    </div>
  </Modal>
</template>

<script>
  import table from '@/components/dt/table/render.js'
  import columnOpt from '../opt/writeoffColumn.js'
  import calcFun from '../opt/calc.js'
  import settlementMgr from '@/biz/commission/settlement.js'

  export default {
    data() {
      return {
        visible: false,
        isEdit: false,
				columns: [],
				list: [],
        commissionAdjustType: this.$dt.dictInfo().commissionAdjustType
      }
    },
    methods: {
      onConfirm() {
        // 校验整个表格
        let arr = this.list.filter(i => i.add)
        let errorFlag = false
        for (let item of arr) {
          if (!item.reason || !item.adjustAmount) {
            errorFlag = true
            break
          } else {
            let reg = /^-{0,1}\d+(\.\d{1,2}){0,1}$/
            if (!reg.test(item.adjustAmount)) {
              errorFlag = true
              break
            }
          }
        }
        // 输入有错，抛出提示
        if (errorFlag) {
          this.$Message.error('请输入正确的调整数据，且不能为空')
          return
        }
        let list = this.list.map(i => {
          return !i.add ? i : {
            commissionId: i.commissionId,
            adjustType: i.adjustType,
            reason: i.reason,
            adjustAmount: i.adjustAmount
          }
        })
        settlementMgr.adjustSave({
          commissionId: this.$route.query.commissionId,
          list
        }).then(res => {
          let total = this.list.reduce((num, { adjustAmount }) => {
            return calcFun.dealPrecision(num + Number(adjustAmount))
          }, 0)
          this.$parent.adjustCommission = total
          this.$Message.success('调整成功')
          this.hide()
        })
      },
      // 添加
      onAdd() {
        this.list.push({
          add: true,
          commissionId: this.$route.query.commissionId,
          adjustType: '1',
          reason: '',
          adjustAmount: ''
        })
      },
      // 删除
      onDelete(index) {
        this.list.splice(index, 1)
      },
      onChange(row, index) {
        this.list[index] = row
      },
      // 输入框失去焦点校验数据
      onBlur(row, index, field) {
        this.list[index] = row
        if (!row[field]) {
          this.$Message.error(field === 'reason' ? '调整原因不能为空' : '调整金额不能为空')
          return
        }
        if (field === 'adjustAmount') {
          let reg = /^-{0,1}\d+(\.\d{1,2}){0,1}$/
          if (!reg.test(row[field])) {
            this.$Message.error('请输入正确的调整金额，且保留两位小数')
            return
          }
        }
      },
      // 查询调整列表
      getList() {
        settlementMgr.adjustList(this.$route.query.commissionId).then(res => {
          this.list = res
        })
      },
      show(isEdit) {
        this.visible = true
        this.isEdit = isEdit
        this.columns = columnOpt.adjustHeaders(this)
        if (isEdit) {
          this.columns.push({
            key: 'handles',
            title: '操作',
            width: 80,
            render: (h, params) => {
              return table.cell.btn(this, h, {
                title: '删除',
                event: 'onDelete',
                data: params.index
              })
            }
          })
        }
        this.getList()
      },
      hide() {
        this.visible = false
      },
    },
  }
</script>

<style lang='scss' scoped>
  .add {
    text-align: right;
    margin-bottom: 10px;
  }
  
  .reason {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>